<template>
  <div>
    <ZgDialog
      v-model="visible"
      title="修改表单"
      top="10%"
      width="60%"
      @ok="save">
      <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
        <a-form-item label="表单名称" required>
          <ZgInput v-model="obj.name"></ZgInput>
        </a-form-item>
        <a-form-item label="表单编码">
          {{ obj.code }}
        </a-form-item>
        <a-form-item label="附件管理" required>
          <ZgSwitch :width="80" v-model="obj.hasAttach" :text="['开启','关闭']"></ZgSwitch>
        </a-form-item>
        <a-form-item v-if="obj.hasAttach" label="附件类型">
          <a v-if="attachTypeList.length===0" @click="plusAttType(0)">增加</a>
          <div v-for="(t,i) in attachTypeList" :key="`attach_type_${i}`" class="flx-s mb10">
            <ZgInput :width="100" class="mr10" v-model="t.name"></ZgInput>
            <ZgNumber
              :width="120"
              :min="1"
              :max="100"
              :precision="0"
              class="mr10"
              v-model="t.limit"></ZgNumber>
            <ZgInput :width="160" class="mr10" v-model="t.type"></ZgInput>
            <div class="btn-circle" @click="plusAttType(i)"><i class="fa fa-plus"/></div>
            <div class="btn-circle" @click="minusAttType(i)"><i class="fa fa-minus"/></div>
          </div>
        </a-form-item>
        <a-form-item label="验证接口地址">
          <ZgInput v-model="obj.validUrl"></ZgInput>
        </a-form-item>
      </a-form>
    </ZgDialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      obj: {
        id: '',
        name: '',
        code: '',
        hasAttach: false,
        validUrl: ''
      },
      attachTypeList: [
        { name: '默认', type: '.pdf,.png', limit: 10 }
      ]
    }
  },
  mounted () {
  },
  methods: {
    open (json) {
      this.obj = Object.assign({}, this.obj, json || {})
      this.attachTypeList = json.attType ? JSON.parse(json.attType) : [{ name: '默认', type: '.pdf,.png', limit: 10 }]
      this.visible = true
    },
    save () {
      if (this.obj.name.length === 0) {
       this.$warning({ title: '请输入表单名称' })
       return
      }
      const attachTypeArr = this.attachTypeList.filter(t => {
        return t.name && t.type && t.name.length > 0 && t.type.length > 0
      })
      this.$http.post('/zg-autoform/form/update', Object.assign({}, this.obj, {
        attType: JSON.stringify(attachTypeArr)
      }), () => {
        this.visible = false
        this.$emit('ok')
      })
    },
    plusAttType (i) {
      this.attachTypeList.splice(i + 1, 0, { name: '', type: '', limit: 10 })
    },
    minusAttType (i) {
      this.attachTypeList.splice(i, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
